extends /templates/base-flat

block content
  .container
    .row.text-center
      .col-md-offset-2.col-md-8
        h3.m-t-3(data-i18n="teachers_quote.create_account")
        h4(data-i18n="[html]teachers_quote.create_account_subtitle")
        .alert.alert-info.m-y-2
          span.spr(data-i18n="signup.login_switch")
          a.login-link(data-i18n="login.log_in")
        #social-network-signups.m-y-2
          button#facebook-signup-btn.btn.btn-facebook.btn-lg.m-x-1
            span.spr(data-i18n="teachers_quote.connect_with")
            | Facebook
            img.m-l-1(src='/images/pages/community/logo_facebook.png')

          button#gplus-signup-btn.btn.btn-gplus.btn-lg.spr
            span.spr(data-i18n="teachers_quote.connect_with")
            | Google
            img.m-l-1(src='/images/pages/community/logo_g+.png')

    #gplus-logged-in-row.row.text-center.hide
      .col-md-offset-2.col-md-8
        h2(data-i18n="signup.connected_gplus_header")
        p(data-i18n="signup.connected_gplus_p")
    #facebook-logged-in-row.row.text-center.hide
      .col-md-offset-2.col-md-8
        h2(data-i18n="signup.connected_facebook_header")
        p(data-i18n="signup.connected_facebook_p")

    form#signup-form

      .row.m-y-2
        .col-md-offset-2.col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="general.username")
            span.name-check.fancy-error.pull-right
              - var checkNameState = view.state.get('checkNameState');
              if checkNameState === 'checking'
                span.small(data-i18n="signup.checking")
              if checkNameState === 'exists'
                span.small
                  span= view.state.get('suggestedNameText')
              if checkNameState === 'available'
                span.small
                  span(data-i18n="signup.name_available")

            input.form-control(name="name")

        .col-md-4.col-sm-6
          #email-form-group.form-group
            span.control-label(data-i18n="general.email")
            span.email-check.fancy-error.pull-right
              - var checkEmailState = view.state.get('checkEmailState');
              if checkEmailState === 'checking'
                span.small(data-i18n="signup.checking")
              if checkEmailState === 'exists'
                span.small
                  span(data-i18n="signup.account_exists")
                  =" "
                  a.login-link(data-i18n="signup.sign_in")

              if checkEmailState === 'available'
                span.small
                  span(data-i18n="signup.email_good")
            input.form-control(name="email")


      .row.m-y-2
        .col-md-offset-2.col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="general.first_name")
            input.form-control(name="firstName")

        .col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="general.last_name")
            input.form-control(name="lastName")

      .row.m-y-2
        .col-md-offset-2.col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="general.password")
            input.form-control(name="password1", type="password")

        .col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="general.confirm_password")
            input.form-control(name="password2", type="password")

      .row.m-y-2
        .col-md-offset-2.col-md-4.col-sm-6
          .form-group
            span.control-label
              span(data-i18n="teachers_quote.phone_number")
            input.form-control(name="phoneNumber", data-i18n="[placeholder]teachers_quote.phone_number_help")

        .col-md-4.col-sm-6
          .form-group
            span.control-label(data-i18n="teachers_quote.primary_role_label")
            select.form-control(name="role")
              option(data-i18n="teachers_quote.role_default", , value='')
              option(data-i18n="courses.teacher", value="Teacher")
              option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator")
              option(data-i18n="teachers_quote.advisor", value="Advisor")
              option(data-i18n="teachers_quote.principal", value="Principal")
              option(data-i18n="teachers_quote.superintendent", value="Superintendent")
              option(data-i18n="teachers_quote.parent", value="Parent")

      #form-school-info
        .row.m-y-2
          .col-md-offset-2.col-md-4.col-sm-6
            .form-group
              span.control-label
                span(data-i18n="teachers_quote.organization_label")
                span.spl.text-muted(data-i18n="signup.optional")
              input.form-control#organization-control(name="organization")

          .col-md-4.col-sm-6
            .form-group
              //- TODO: algolia and form errors both change form-control
              //- TODO: District not red on validation error
              span.control-label.form-control.nullify-form-control(data-i18n="teachers_quote.district_label")
              input.form-control#district-control(name="district", data-i18n="[placeholder]teachers_quote.district_na")

        .row.m-y-2
          .col-md-offset-2.col-md-4.col-sm-6
            .form-group
              span.control-label(data-i18n="teachers_quote.city")
              input.form-control(name="city")

          .col-md-4.col-sm-6
            .form-group
              span.control-label(data-i18n="teachers_quote.state")
              input.form-control(name="state")

        .row.m-y-2
          .col-md-offset-2.col-md-4.col-sm-6
            .form-group
              span.control-label(data-i18n="teachers_quote.country")
              input.form-control(name="country")

      #form-students-info
        .row.m-y-2
          .col-md-offset-2.col-md-4
            .form-group
              span.control-label(data-i18n="courses.number_programming_students")
              .help-block.small
                em.text-info(data-i18n="teachers_quote.num_students_help")
              select.form-control(name="numStudents")
                option(data-i18n="teachers_quote.num_students_default", value='')
                option 1-10
                option 11-50
                option 51-100
                option 101-200
                option 201-500
                option 501-1000
                option 1000+

          .col-md-4.col-sm-6
            .form-group
              span.control-label
                span(data-i18n="courses.number_total_students")
              select.form-control(name="numStudentsTotal")
                option(data-i18n="teachers_quote.num_students_default", value='')
                option 1-500
                option 500-1,000
                option 1,000-5,000
                option 5,000-10,000
                option 10,000+

        .form-group
          .row.m-y-2
            .col-md-offset-2.col-md-4
              span.control-label(data-i18n="teachers_quote.education_level_label")
              .help-block.small
                em.text-info(data-i18n="teachers_quote.education_level_help")
              .checkbox
                label
                  input(type="checkbox" name="educationLevel" value="Elementary")
                  span(data-i18n="teachers_quote.elementary_school")
              .checkbox
                label
                  input(type="checkbox" name="educationLevel" value="Middle")
                  span(data-i18n="teachers_quote.middle_school")
              .checkbox
                label
                  input(type="checkbox" name="educationLevel" value="High")
                  span(data-i18n="teachers_quote.high_school")
              .checkbox
                label
                  input(type="checkbox" name="educationLevel" value="College+")
                  span(data-i18n="teachers_quote.college_plus")
              .checkbox
                label
                  input#other-education-level-checkbox(type="checkbox")
                  span(data-i18n="nav.other").spr
                  span(data-i18n="teachers_quote.please_explain")
              input#other-education-level-input.form-control

      #referrer.row.m-y-2
        .col-md-offset-2.col-md-8
          span.control-label
            span(data-i18n="teachers_quote.referrer")
            span.spl.text-muted(data-i18n="signup.optional")
            .help-block.small
              em.text-info(data-i18n="teachers_quote.referrer_help")
            
          input#oreferrer-input.form-control(name="referrer")

      #anything-else-row.row.m-y-2
        .col-md-offset-2.col-md-8
          span.control-label
            span(data-i18n="teachers_quote.anything_else")
            span.spl.text-muted(data-i18n="signup.optional")

          textarea.form-control(rows=8, name="notes")

          input(type="hidden" name="nces_id")
          input(type="hidden" name="nces_name")
          input(type="hidden" name="nces_district")
          input(type="hidden" name="nces_district_id")
          input(type="hidden" name="nces_district_schools")
          input(type="hidden" name="nces_district_students")
          input(type="hidden" name="nces_students")
          input(type="hidden" name="nces_phone")

      #buttons-row.row.m-y-2.text-center
        input#create-account-btn.btn.btn-lg.btn-primary(type="submit" data-i18n="[value]teachers_quote.create_account")
